<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="author" content="范珍珍">
        <title>cart</title>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="cart.css">
        <link rel="stylesheet" href="base.css">
        <style>
            
        </style>
    </head>
    <body>
         <!--底部导航栏-->
        <footer class="footer_ul">
            <ul class="ul_li">
                <li class="same-li color_first"><a href="index.html"><span class="glyphicon glyphicon-home"></span><span>首页</span></a></li>
                <li class="same-li"><a href="home.html"><span class="glyphicon glyphicon-th-list"></span><span>分类</span></a></li>
                <li class="same-li"><a href="cart.html"><span class="glyphicon glyphicon-shopping-cart"></span><span>购物车</span></a></li>
                <li class ="same-li"><a href="my.html"><span class="glyphicon glyphicon-user"></span><span>我的</span></a></li>
            </ul>
        </footer>

<!--主要内容区-->
    <main id="maincontent">
            <div class="nav_home">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <sapn>购物车</sapn>
            <span class="glyphicon glyphicon-search"></span>
        </div>
<!--享受更多优惠-->
  <div class="online">
      <span>登录后享受更多优惠</span>
      <a href="">
          <span>去登录</span>
          <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
  </div>

  <!--购物车是空的-->
  <div class="empty">
      <span class="glyphicon glyphicon-shopping-cart"></span>
      <span id="empcar">购物车还是空的</span>
      <a href=""><span>去逛逛</span></a>
  </div>

  <!--为你推荐-->
  <div class="produce">
      <p>为你推荐</p>
      <div class="someproduct">
          <a href="">
              <figure>
                  <img src="image/图片2.jpg" alt="">
                  <figcaption>
                      <h4>红米NOTE</h4>
                        <h6>￥999</h6>
                  </figcaption>
              </figure>
          </a>
          <a href="">
              <figure>
                  <img src="image/图片2.jpg" alt="">
                  <figcaption>
                      <h4>红米NOTE</h4>
                        <h6>￥999</h6>
                  </figcaption>
              </figure>
          </a>
          <a href="">
              <figure>
                  <img src="image/图片3.jpg" alt="">
                  <figcaption>
                      <h4>红米NOTE</h4>
                        <h6>￥999</h6>
                  </figcaption>
              </figure>
          </a>
          <a href="">
              <figure>
                  <img src="image/图片4.jpg" alt="">
                  <figcaption>
                      <h4>红米NOTE</h4>
                        <h6>￥999</h6>
                  </figcaption>
              </figure>
          </a>
          <a href="">
              <figure>
                  <img src="image/图片5.jpg" alt="">
                  <figcaption>
                      <h4>红米NOTE</h4>
                        <h6>￥999</h6>
                  </figcaption>
              </figure>
          </a>
          <a href="">
              <figure>
                  <img src="image/图片6.jpg" alt="">
                  <figcaption>
                      <h4>红米NOTE</h4>
                        <h6>￥999</h6>
                  </figcaption>
              </figure>
          </a>
      </div>
  </div>
 </main>
    
        <script src="bootstrap/js/jquery.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>

    <script>
        var lis=document.getElementsByClassName('same-li')
        for(var i=0;i<lis.length;i++){
        var item_li=lis[i];
        item_li.onclick=function(){
            for(var j=0;j<lis.length;j++){
                var li=lis[j];
                li.className='same-li'
            }
            this.className='same-li color_first'

        }
}

    </script>
</html>